<template>
	<view class="theme-tourism">
		<view class="top">
			<uni-icons style="color: #ccc;" type="left" size="20" @click='back'></uni-icons>
			<view class="header">
				主题旅游
			</view>
			<view>
			</view>
		</view>
		<!-- 搜索栏 -->
		<view class="search-bar">
			<uni-icons style="color: #ccc;" type="search" size="30"></uni-icons>
			<input type="text" style="border: none;" placeholder="搜索目的地 / 景点"   @click="navBack"/>
		</view>

		<!-- 景点列表 -->
		<view class="scenic-list">
			<view class="scenic-item" v-for="(scenic, index) in scenics" :key="index" @click="goBack">
				<view class="scenic-header">
					<image :src="scenic.image" mode="aspectFill" class="scenic-image" />

				</view>
				<view class="scenic-info">
					<text class="scenic-name">{{ scenic.name }}</text>
					<uni-tag text="5A"
						custom-style="background-color: #F2F2F2; border-color: #F2F2F2; color: #666;width: 30rpx;font-weight: 400;">
					</uni-tag>
					<text class="scenic-rating">{{ scenic.rating }}分 {{ scenic.reviews }}人评价</text>
					<text class="scenic-distance">距您{{ scenic.distance }}km</text>
					<text class="scenic-tags">
						<uni-tag size="mini" :inverted="true" text="可订明日" type="primary" />
						<uni-tag size="mini" :inverted="true" text="随时退" type="primary" />
						<text v-if="scenic.price" class="scenic-price"><text
								style="color: #C72A28; font-size: 40rpx;">¥{{ scenic.price }}</text>起</text>
						<text v-else-if="scenic.isFree" class="scenic-price" type="text">免费预约</text>
						<text v-else class="scenic-price">免费</text>
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	const navBack=()=>{
		uni.navigateTo({
			url:'/pagesB/shousuo/shousuo'
		})
	}
	const goBack=()=>{
		uni.navigateTo({
			url:'/pagesB/seacrch/search'
		})
	}
	const scenics = reactive([{
			name: '故宫博物馆',
			image: 'https://cdn8.axureshop.com/demo2024/2251242/images/%E4%B8%BB%E9%A2%98%E6%99%AF%E7%82%B9%E5%88%97%E8%A1%A8/u538.svg',
			rating: '4.6',
			reviews: '5632',
			distance: '1.2',
			price: '40',
			isFree: false,
		},
		{
			name: '八达岭长城',
			image: 'https://cdn8.axureshop.com/demo2024/2251242/images/%E4%B8%BB%E9%A2%98%E6%99%AF%E7%82%B9%E5%88%97%E8%A1%A8/u538-0.svg', // 替换为实际图片路径
			rating: '4.6',
			reviews: '17532',
			distance: '4.9',
			price: '35',
			isFree: false,
		},
		{
			name: '香山公园',
			image: 'https://cdn8.axureshop.com/demo2024/2251242/images/%E4%B8%BB%E9%A2%98%E6%99%AF%E7%82%B9%E5%88%97%E8%A1%A8/u538-1.svg', // 替换为实际图片路径
			rating: '4.9',
			reviews: '15748',
			distance: '7.0',
			price: '10',
			isFree: false,
		},
		{
			name: '白塔寺',
			image: 'https://cdn8.axureshop.com/demo2024/2251242/images/%E4%B8%BB%E9%A2%98%E6%99%AF%E7%82%B9%E5%88%97%E8%A1%A8/u538-2.svg', // 替换为实际图片路径
			rating: '4.6',
			reviews: '5632',
			distance: '2.3',
			price: '',
			isFree: true,
		},
		{
			name: '湖广会馆',
			image: 'https://cdn8.axureshop.com/demo2024/2251242/images/%E4%B8%BB%E9%A2%98%E6%99%AF%E7%82%B9%E5%88%97%E8%A1%A8/u538-3.svg', // 替换为实际图片路径
			rating: '4.6',
			reviews: '15748',
			distance: '2.3',
			price: '',
			isFree: true,
		},
		{
			name: '北京古代建筑博物馆',
			image: 'https://cdn8.axureshop.com/demo2024/2251242/images/%E4%B8%BB%E9%A2%98%E6%99%AF%E7%82%B9%E5%88%97%E8%A1%A8/u538-4.svg', // 替换为实际图片路径
			rating: '4.6',
			reviews: '15748',
			distance: '2.3',
			price: '',

			isFree: false,
		},
		{
			name: '北京杜莎夫人蜡像馆',
			image: 'https://cdn8.axureshop.com/demo2024/2251242/images/%E4%B8%BB%E9%A2%98%E6%99%AF%E7%82%B9%E5%88%97%E8%A1%A8/u538-5.svg', // 替换为实际图片路径
			rating: '4.6',
			reviews: '15748',
			distance: '2.3',
			price: '90',
			isFree: false,
		},
		{
			name: '中国国家博物馆',
			image: 'https://cdn8.axureshop.com/demo2024/2251242/images/%E4%B8%BB%E9%A2%98%E6%99%AF%E7%82%B9%E5%88%97%E8%A1%A8/u538-6.svg', // 替换为实际图片路径
			rating: '4.6',
			reviews: '15748',
			distance: '2.3',
			price: '',
			isFree: true,
		},
		{
			name: '天安门广场',
			image: 'https://cdn8.axureshop.com/demo2024/2251242/images/%E4%B8%BB%E9%A2%98%E6%99%AF%E7%82%B9%E5%88%97%E8%A1%A8/u538-7.svg', // 替换为实际图片路径
			rating: '4.6',
			reviews: '15748',
			distance: '2.3',
			price: '',

			isFree: false,
		},
		{
			name: '史家胡同博物馆',
			image: 'https://cdn8.axureshop.com/demo2024/2251242/images/%E4%B8%BB%E9%A2%98%E6%99%AF%E7%82%B9%E5%88%97%E8%A1%A8/u538-8.svg', // 替换为实际图片路径
			rating: '4.6',
			reviews: '15748',
			distance: '2.3',
			price: '',

			isFree: false,
		}
	])
	// console.log(scenics.value)
	console.log(scenics)
	const back =()=>{
		uni.navigateBack({
			data:1
		})
	}
</script>
<style scoped>
	.active {
		font-size: 40rpx;
		color: #C72A28;
	}

	.top {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
	}

	.header {
		width: 150rpx;
	}

	.theme-tourism {
		padding: 10px;
		background-color: #ffffff;
	}

	.search-bar {
		height: 25rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 10px;
		border-radius: 50rpx;
		margin: 10px;
		margin-bottom: 10px;
		border: 1px solid rgba(228, 228, 228, 1);
	}

	.search-bar input {
		height: 40px;
		flex: 1;
		border: none;
		outline: none;
		padding: 5px;
	}

	.search-button {
		height: 40px;
		line-height: 30px;
		background-color: #007aff;
		color: #fff;
		border: none;
		padding: 5px 10px;
		border-radius: 5px;
	}

	.scenic-list {
		background-color: #fff;
	}

	.scenic-item {
		display: flex;
		padding: 10px;
		height: 250rpx;
		border-bottom: 1px solid #eee;
	}

	.scenic-header {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.scenic-image {
		width: 100px;
		height: 100px;
		margin-right: 10px;
		border-radius: 5px;
	}

	.scenic-name {
		font-size: 16px;
		font-weight: bold;
		padding: 10rpx;
	}

	.scenic-level {
		font-size: 14px;
		color: #666;
	}

	.scenic-info {
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex: 1;
	}

	.scenic-rating,
	.scenic-distance,
	.scenic-price {
		font-size: 14px;
		color: #333;
		padding: 10rpx;
	}

	.scenic-price {
		margin-left: 90rpx;
	}

	.scenic-tags {
		display: flex;
	}

	.tag {
		background-color: #f0f0f0f0;
		border-radius: 5px;
		padding: 2px 5px;
		margin-right: 5px;
		font-size: 12px;
		color: #666;
	}
</style>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>